<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度验证</title>
    <style>
        div{
            width: 450px;
            display: flex;
            margin-bottom: 10px;
            position: relative;
        }
        label{
            width: 70px;
            text-align: center;
        }
        span{
            position: absolute;
            right: -12px;
            top: 0;
        }
        .conform{
            color: #58bc58;
        }
        .unConform{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <label for="">用户名</label><input class="username" type="text">
        <span></span>
    </div>
    <div>
        <label for="">手机号</label><input class="phone" type="text">
        <span></span>
    </div>
    <div>
        <label for="">密码</label><input class="password" type="password">
        <span></span>
    </div>

    <script>
        /* 
            用户名：14个字母/7个汉字
            手机号：11位，1开头，第二位3、5、6、7、8、9
            密码：8-14个字符【数字、字母、标点符号组成】

            失焦判断

        */

        // 获取元素
        var username = document.querySelector('.username');
        var phone = document.querySelector('.phone');
        var password = document.querySelector('.password');

        // 正则
        // 【△】1.用户名：14个字母/7个汉字【当输入6个汉字时，最后只能输入2个字母或者一个汉字】
        /* var userReg = /^(([a-z]{2,14})|([\u4e00-\u9fa5]{1,7}))$/i; */
        var userReg = /^[a-z\u4e00-\u9fa5]{2,14}$/i;

        // 2.手机号：11位，1开头，第二位3、5、6、7、8、9
        var phoneReg = /^1[356789]\d{9}$/;
        // 3.密码：8-14个字符
        var passwordReg = /^[a-z0-9,.\/`!@#%]{8,14}$/i;

        // 失焦
        // 用户名：中英混合，通过长度判断
        username.onblur = function(){
            // 值获取
            var _user = username.value;
            // 符合正则，进入长度判断
            if(userReg.test(_user)){
                var newUn = username.value.replace(/[\u4e00-\u9fa5]/g,'zm');
                // 中文转化为字母后进行长度判断
                if(newUn.length>14){
                    username.nextElementSibling.innerHTML = '长度超过';
                    username.nextElementSibling.className = 'unConform';
                }else{
                    username.nextElementSibling.innerHTML = '符合要求';
                    username.nextElementSibling.className = 'conform';
                }
            // 不符合正则
            }else{
                username.nextElementSibling.innerHTML = '请输入14个字母或者7个汉字';
                username.nextElementSibling.className = 'unConform';
            }
        }
        // 手机号
        phone.onblur = function(){
            var _phone = phone.value;
            if(phoneReg.test(_phone)){
                phone.nextElementSibling.innerHTML = '符合要求';
                phone.nextElementSibling.className = 'conform';
            }else{
                phone.nextElementSibling.innerHTML = '请输入正确的11位手机号码';
                phone.nextElementSibling.className = 'unConform';
            }
        }

        // 密码
        password.onblur = function(){
            var _password = password.value;
            if(passwordReg.test(_password)){
                password.nextElementSibling.innerHTML = '符合要求';
                password.nextElementSibling.className = 'conform';
            }else{
                password.nextElementSibling.innerHTML = '请输入8-14个字符';
                password.nextElementSibling.className = 'unConform';
            }
        }
    </script>
</body>
</html>